import React, { Component } from 'react';
import {
	StyleSheet, Text, Modal,
	PixelRatio, View, Image, ScrollView
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import MethodUtil from '../../../utils/MethodUtil';
import navigationSeevice from '../../../components/navigation/navigationSeevice';

const scale = GLOBAL.SCALE;

export class SinoNewThrowDetailPage extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '抛单信息',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack(); }} color='#fff' />,
			headerRight: null,
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};
	constructor(props) {
		super(props);
		console.log('SinoNewThrowDetailPage-传参数', props.navigation.state.params);
		let { SOrderInfo, purchaseOrderId } = props.navigation.state.params;
		let { orderId } = SOrderInfo || {};
		this.orderId = orderId;
		this.state = {
			mergeDetail: {},
			status: 'data'
		}
	}

	componentWillMount() {
		this._init()
	}

	_init = async () => {
		this.setState({ status: 'loading' })
		let response = await HTTP.GET(API_GENERATE(API.ZXY_MERGE_DETAIL), { orderId: this.orderId });
		if (response) {
			this.setState({
				mergeDetail: response,
				status: 'data'
			})
		} else {
			this.setState({ status: 'error' })
		}

	}

	render() {
		let { mergeDetail, status } = this.state;
		let { inMergeInfo, openMergeInfo, portName } = mergeDetail;
		let { orderTotal, orderList } = inMergeInfo || {};
		let { SOrderInfo, purchaseOrderId } = this.props.navigation.state.params;
		let { staffOrganName } = SOrderInfo || {};
		return (
			<View style={styles.container}>
				{
					status == 'data' ?
						<ScrollView>
							<View style={styles.infoCard}>
								<View style={styles.rowSpaceBetween}>
									<Text style={styles.title}>{portName || '-'}</Text>
								</View>
								<View style={styles.row}>
									<Text style={[styles.commonText, { fontWeight: '600' }]}>新油内销单号：</Text>
									<Text style={[styles.commonText, { color: style.color.themeColor }]}>{this.orderId || '-'}</Text>
								</View>
								<View style={[styles.row, styles.xian]}>
									<Text style={[styles.commonText, { fontSize: 11 * scale }]}>操作人：李梦颖 | {staffOrganName || '-'} | 2020-08-22 10:00</Text>
								</View>
								<View style={[styles.WClist, styles.xian]}>
									<View style={styles.row}>
										<Text style={[styles.commonText, { fontWeight: '600' }]}>内销关联外采单号：</Text>
										<Text style={[styles.commonText, { color: style.color.themeColor }]}>{purchaseOrderId || '-'}</Text>
									</View>
									<View style={styles.row}>
										<Text style={[styles.commonText, styles.redText]}>(合计：</Text>
										{
											orderTotal && orderTotal.length && orderTotal.map((item, index) => {
												let { goodsName, quantity } = item;
												return (
													<View style={[styles.rowSpaceBetween]}>
														<Text style={[styles.commonText, styles.redText]}>{goodsName || '-'} </Text>
														<Text style={[styles.commonText, styles.redText]}>{quantity || '-'}吨</Text>
														{(index + 1) !== orderTotal.length ? <Text style={[styles.commonText, styles.redText]}> | </Text> : null}
													</View>
												)
											})
										}
										<Text style={[styles.commonText, styles.redText]}>)</Text>
									</View>
									{
										orderList && orderList.length && orderList.map((order, index) => {
											let { companyName, orderId, itemList } = order;
											return (
												<View key={index} style={[styles.NClist, styles.xian]}>
													<View style={styles.row}>
														<Text style={styles.commonText}>内销：{companyName && companyName.length > 8 ? `${companyName.substring(0, 8)}...` : (companyName || '-')} | </Text>
														<Text style={[styles.commonText, { color: style.color.themeColor }]}>{orderId || '-'}</Text>
													</View>
													{
														itemList && itemList.length && itemList.map((item, index) => {
															let { goodsName, lockedQuantity } = item;
															return (
																<View key={index} style={[styles.rowSpaceBetween, { paddingTop: 8 * scale }]}>
																	<Text style={[styles.commonText, { flex: 2 }]}>{goodsName || '-'}</Text>
																	<Text style={[styles.commonText, { flex: 1 }]}>内销量 {lockedQuantity || '-'} 吨</Text>
																</View>
															)
														})
													}
												</View>
											)
										})
									}
								</View>
								<View style={[styles.WClist]}>
									<View style={styles.row}>
										<Text style={[styles.commonText, { fontWeight: '600' }]}>内敞口关联外采单号：</Text>
										<Text style={[styles.commonText, { color: style.color.themeColor }]}>{purchaseOrderId || '-'}</Text>
									</View>
									<View style={[styles.NClist]}>
										{
											openMergeInfo.orderTotal && openMergeInfo.orderTotal.length && openMergeInfo.orderTotal.map((item, index) => {
												let { goodsName, openQuantity } = item;
												return (
													<View key={index} style={[styles.rowSpaceBetween, { paddingTop: 8 * scale }]}>
														<Text style={[styles.commonText, { flex: 2 }]}>{goodsName || '-'}</Text>
														<Text style={[styles.commonText, { flex: 1 }]}>内敞口量 {openQuantity || '-'} 吨</Text>
													</View>
												)
											})
										}
									</View>
								</View>
							</View>
						</ScrollView>
						: <View style={styles.statusStyle}>
							<PageStatusIndex status={status} onErrorPress={() => this._init()} />
						</View>
				}
			</View>
		)
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#F4F7FE',
		padding: 12 * scale
	},
	title: {
		fontSize: 14 * scale,
		fontWeight: '600',
		paddingTop: 8 * scale,
		paddingBottom: 8 * scale
	},
	infoCard: {
		flex: 1,
		backgroundColor: '#FFF',
		padding: 12 * scale,
		borderRadius: 8 * scale
	},
	rowSpaceBetween: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	commonText: {
		fontSize: 12 * scale,
	},
	row: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingBottom: 8 * scale
	},
	xian: {
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: '#E3E7F0',
	},
	WClist: {
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale
	},
	NClist: {
		backgroundColor: '#F4F7FE',
		padding: 12 * scale
	},
	redText: {
		fontSize: 11 * scale,
		color: style.color.lightRed,
		marginBottom: 6 * scale
	},
	statusStyle: {
		flex: 1,
		flexDirection: 'column',
		justifyContent: 'center',
		alignItems: 'center'
	}
})